<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>

    </style>


</head>

<body>
    {% load static %}
    <ul id="city">

    </ul>
    <input type="text" class="btn btn-primary" value="新建" />
    <img src="{% static 'img\加载.gif' %}" alt="加载" />
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        var cityList = ["北京", "上海", "武汉", "深圳"]
        for (var idx in cityList) {
            var text = cityList[idx];

            // 创建 <li></li> 标签
            var tag = document.createElement("li");
            // 在 li 标签中写入内容
            tag.innerText = text;
            // 添加到id=city 那个标签里面 (DOM)
            var parentTag = document.getElementById("city");
            parentTag.appendChild(tag);
        }
    </script>

</body>

</html>